<template>
  <div class="box-card" v-loading="isLoading">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="des">数据统计范围：{{form.startTime}} 至{{form.invalidTime}}，总计<span style="color:#1B5BFF">{{form.countDays || 0}}天</span></span>
      </div>
      <div class="info">
        <div class="info-title">活动概览</div>
        <div class="card">
          <card title="核销人数" unit="人" :num="numForm.joinUserNum" back='linear-gradient(225deg, #81A5FF 0%, #4B7EFE 100%)' :img="`${$ossUrl}market/effect-head.png`"/>
          <card title="召唤订单总金额" unit="元" :num="numForm.totalOrderAmount" back='linear-gradient(225deg, #B7C5DC 0%, #8394B3 100%)' :img="`${$ossUrl}market/effect-file.png`"/>
          <card title="客单价" unit="元" :num="numForm.averageCost" back='linear-gradient(225deg, #ECD39E 0%, #D6A75B 100%)' :img="`${$ossUrl}market/effect-money.png`"/>
          <card title="实际营销成本" unit="元" :num="numForm.couponCost" back='linear-gradient(225deg, #B3B2DA 0%, #7578B4 100%)' :img="`${$ossUrl}market/effect-folder.png`"/>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="info-title">智能分析</span>
      </div>
      <div class="chart-wrap">
        <div class="chart">
          <div class="bar person"></div>
          <div id="member-persons-bar" style="width: 100%;height: 350px"></div>
        </div>
        <div class="chart">
          <div class="bar money"></div>
          <div id="member-money-bar" style="width: 100%;height: 350px"></div>
        </div>
      </div>
    </el-card>
  </div>  
</template>

<script>
import card from './components/driverCard'
import echarts from 'echarts'
import { activityDetail, activeDataTrend } from '@/api/market'
export default {
  components: {
    card
  },
  data () {
    return {
      isLoading: false,
      activeId: '',
      form: {},
      chartData: []
    }
  },
  computed: {
    numForm () {
      let form = {...this.form}
      return {
        joinUserNum: form.joinUserNum,
        totalOrderAmount: form.totalOrderAmount ? form.totalOrderAmount.toFixed(2) : '0.00',
        averageCost: form.averageCost ? form.averageCost.toFixed(2) : '0.00',
        couponCost: form.couponCost ? form.couponCost.toFixed(2) : '0.00',
      }
    }
  },
  mounted () {
   
    this.activeId = this.$route.query.activeId
    this.activityDetail()
  },
  methods: {
    // 活动效果接口 头部数据
    async activityDetail () {
      this.isLoading = true
      try {
        const { code, result } = await activityDetail({ activeId: this.activeId })
        if (code !== 200) return
        this.form = result
        this.activeDataTrend()
      } catch (error) {
        console.log(error.message)
      } finally {
        this.isLoading = false
      }
    },
    // 图表效果数据
    async activeDataTrend () {
      this.isLoading = true
      try {
        const { code, result } = await activeDataTrend({ activeId: this.activeId })
        if (code !== 200) return
        this.chartData = result.map(item => {
          item.date = item.date.split('-')[1] + '/' + item.date.split('-')[2]
          return item
        })
        this.chartData = result
        const id1 = this.memberPersonChart()
        const id2 = this.memberMoneyChart()
        window.onresize =  () => {
          this[id1].resize()
          this[id2].resize()
        }
      } catch (error) {
        console.log(error.message)
      } finally {
        this.isLoading = false
      }
    },
    memberPersonChart () {
      const { chartData } = this
      const dataXAxis = chartData.map(item => item.date)
      const dataYAxis = chartData.map(item => item.totalUserNum)
      this.drawLine('member-persons-bar', '会员关怀交易人数', dataXAxis, dataYAxis, '#23E1B4', '#367DFF', '每日活动人数')
      return 'member-persons-bar'
    },
    memberMoneyChart () {
      const { chartData } = this
      const dataXAxis = chartData.map(item => item.date)
      const dataYAxis = chartData.map(item => item.totalAmount)
      this.drawLine('member-money-bar', '会员关怀交易金额', dataXAxis, dataYAxis, '#FF9A6F', '#E31937', '每日活动金额')
      return 'member-money-bar'
    },
    drawLine (id, title, dataXAxis, dataYAxis, startColor, endColor, type) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(id))
      this[id] = myChart
      // 绘制图表
      myChart.setOption({
        title: {
          text: type,
          left: id === 'member-money-bar' ? '40%' : '35%',
          textStyle: {
            fontWeight: 'bold',
            fontSize: 18,
          }
        },
        tooltip: {
          formatter (params) {
            var dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image:linear-gradient(${startColor}, ${endColor})"></span>`
            return params.name + '</br>' + dotHtml + type + '：' + params.value
          }
        },
        xAxis: {
          data: dataXAxis,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color:'#E7E7E7',
              width: 2
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            interval:0,
            textStyle: {
              color: '#666666'
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
        },
        series: [{
          name: type,
          data: dataYAxis,
          type: 'bar',
          barWidth: '30',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: startColor},
                  {offset: 1, color: endColor}
                ]
              )
          }
        }]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  width: 100%;
  margin-top: 10px;
}
.des{
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
}
.info-title{
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222; 
  margin-bottom: 10px;
}
.card{
  width:100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chart-wrap{
  display: flex;
  box-sizing: border-box;
}
.chart{
  width: 50%; 
  padding: 10px;
  position: relative;
  .bar{
    position: absolute;
    top: 27px;
    width: 116px;
    height: 10px;
    border-radius: 5px;
    background-image: linear-gradient(#FFF1F3, #FFD6DE);
    &.person{
      left: 35.7%;
    }
    &.money{
      left: 40.6%
    }
  }
}
</style>